{% extends 'base.html' %}



{% block contents_inner %}
    <div class="col-12">
        <form action="" method="post" id="dataForm">
            {% csrf_token %}
            <div class="section-content">
                <div class="content-details show">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <select id="provinceSelect" class="form-control" name="province">
                                    <option value="">请选择一个待预测的省份</option>
                                    {% for province in provinces %}
                                        <option value="{{ province }}">{{ province }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-12">
        <div class="section-content">
            <div class="content-details show">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="content-details" id="forecastResult"
                             style="width: 100%; height: 130px; align-content: center">
                            <p id="p1"></p>
                            <p id="p2"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="section-content">
            <div class="content-head">
                <h4 class="content-title">Pilled Tab</h4>
            </div>
            <div class="content-details show">
                <div class="tab-5">
                    <ul class="nav nav-tabs nav-pills" id="tab5" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#section13" role="tab" aria-controls="section13" aria-selected="true" aria-expanded="false">
                                Section 13
                            </a>
                        </li>
                        
                 
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade" id="section13" role="tabpanel" aria-labelledby="section13" aria-expanded="false"> 
                            Et et consectetur ipsum labore excepteur est proident excepteur
                        </div>
                  
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="content-details" id="gradeChart" style="width: 100%; height: 600px;"></div>
    </div>

{% endblock %}





{% block js_code %}
    <script>
        var myChart = echarts.init(document.getElementById('gradeChart'));
        // 获取当前时间
        var now = new Date();
        // 获取年、月、日、时、分、秒
        var year = now.getFullYear();
        var month = now.getMonth() + 1; // 月份是从0开始的，所以需要加1
        var day = now.getDate();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        // 对于单个数字的月、日、时、分、秒，前面补零以保持两位数格式
        month = String(month).padStart(2, '0');
        day = String(day).padStart(2, '0');
        hours = String(hours).padStart(2, '0');
        minutes = String(minutes).padStart(2, '0');
        seconds = String(seconds).padStart(2, '0');

        // 格式化为"年-月-日 时:分:秒"
        var formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        $('#dataForm').change(function () {
            var province = $('#provinceSelect').val();
            if (province) {
                $.ajax({
                    url: '{% url 'predict:AQI_prediction_lstm' %}',
                    type: 'post',
                    data: {'province': province},
                    headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                    success: function (data) {
                        console.log(data);
                        var option = {
                            title: {
                                left: 'center',
                                text: '预测明日AQI等级',
                                subtext: '当前时间' + formattedTime
                            },
                            series: [
                                {
                                    type: 'gauge',
                                    startAngle: 180,
                                    endAngle: 0,
                                    center: ['50%', '75%'],
                                    radius: '90%',
                                    min: 0,
                                    max: 300,
                                    splitNumber: 6,
                                    axisLine: {
                                        lineStyle: {
                                            width: 6,
                                            color: [
                                                [0.1667, '#00e400'],
                                                [0.3333, '#ffff00'],
                                                [0.5, '#ff7e00'],
                                                [0.6667, '#ff0000'],
                                                [1, '#7e0023']
                                            ]
                                        }
                                    },
                                    pointer: {
                                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                                        length: '12%',
                                        width: 20,
                                        offsetCenter: [0, '-60%'],
                                        itemStyle: {
                                            color: 'auto'
                                        }
                                    },
                                    axisTick: {
                                        length: 12,
                                        lineStyle: {
                                            color: 'auto',
                                            width: 2
                                        }
                                    },
                                    splitLine: {
                                        length: 20,
                                        lineStyle: {
                                            color: 'auto',
                                            width: 5
                                        }
                                    },
                                    axisLabel: {
                                        color: '#464646',
                                        fontSize: 20,
                                        distance: -60,
                                        rotate: 'tangential',
                                        formatter: function (value) {
                                            if (value <= 50) {
                                                return '优';
                                            } else if (value <= 100) {
                                                return '良';
                                            } else if (value <= 150) {
                                                return '轻度污染';
                                            } else if (value <= 200) {
                                                return '中度污染';
                                            } else if (value <= 300) {
                                                return '重度污染';
                                            } else {
                                                return '严重污染';
                                            }
                                        }
                                    },
                                    title: {
                                        offsetCenter: [0, '-10%'],
                                        fontSize: 20
                                    },
                                    detail: {
                                        fontSize: 30,
                                        offsetCenter: [0, '-35%'],
                                        valueAnimation: true,
                                        formatter: function (value) {
                                            return Math.round(value) + '';
                                        },
                                        color: 'inherit'
                                    },
                                    data: [
                                        {
                                            value: data.predicted_aqi.toString(),
                                            name: '明日空气质量指数'
                                        }
                                    ]
                                }
                            ]
                        };
                        myChart.setOption(option);
                        // 插入预测结果
                        $('#p1').html('预测明日AQI指数为：' + data.predicted_aqi);
                        $('#p2').html(data.suggestion);
                    },
                    error: function (error) {
                        console.error('请求数据失败:', error);
                    }
                });
            }
        });
    </script>
{% endblock %}





























